<script setup lang="ts">

import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {showToast} from "vant";

import mine1Img from '../../assets/images/mine1.png';
import mine2Img from '../../assets/images/mine2.png';
import mine3Img from '../../assets/images/mine3.png';
import mine4Img from '../../assets/images/mine4.png';
import mine5Img from '../../assets/images/mine5.png';
import mine6Img from '../../assets/images/mine6.png';
import mine7Img from '../../assets/images/mine7.png';
import mine8Img from '../../assets/images/mine8.png';
import mine9Img from '../../assets/images/mine9.png';
import mine10Img from '../../assets/images/mine10.png';
import headImg from '../../assets/images/head.png';

import {authInfo, getUserInfoApi, loginOutApi} from "@/api/userApi.ts";

const router = useRouter();

//退出
const logout = () => {
  loginOutApi().then(res => {
    //清空token
    localStorage.removeItem('token');
    showToast(res.msg);
    router.push({name: 'login'})
    window.location.reload(); // 刷新当前页面
  })
}

const user = ref([]);
const fetchUserData = () => {
  getUserInfoApi().then(res => {
    user.value = res.data;
  })
}

const auth = ref([]);
const fetchAuthData = () => {
  authInfo().then(res => {
    auth.value = res.data;
  })
}

onMounted(() => {
  fetchUserData();
  fetchAuthData();
});
</script>

<template>
  <div class="user">
    <div class="head">
      <van-image round width="100%" height="100%" :src="headImg"/>
    </div>
    <div class="user-right">
      <span>{{ user.account }}</span>
      <span style="color: #686969;font-size: 14px">{{ user.level_name_txt }}</span>
    </div>
  </div>

  <div class="info">
    <div class="price">
      <div class="price-item-top">
        <div>
          {{ $t('mine.balance') }}
          <van-tag color="#c2c2c2" size="large" v-if="auth == null">{{ $t('mine.noAuth') }}</van-tag>
          <van-tag type="warning" size="large" v-if="auth?.status == 0">{{ $t('mine.waitAuth') }}</van-tag>
          <van-tag type="success" size="large" v-if="auth?.status == 1">{{ $t('mine.passAuth') }}</van-tag>
          <van-tag type="danger" size="large" v-if="auth?.status == 2">{{ $t('mine.rejectAuth') }}</van-tag>
        </div>
        <span>{{ user.balance }}</span>
      </div>

      <div class="price-item-bottom">
        <div>
          <span>{{ $t('mine.profitAndLoss') }}</span>
          <span>{{ user.yingkui }}</span>
        </div>
        <div>
          <span>{{ $t('mine.positionAmount') }}</span>
          <span>{{ user.ccje }}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="menu">
    <div class="menu-item">
      <router-link :to="{name:'recharge'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine1Img"/>
          <span>{{ $t('mine.recharge') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'withdraw'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine2Img"/>
          <span>{{ $t('mine.withdraw') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'auth'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine8Img"/>
          <span>{{ $t('mine.auth') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'order'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine3Img"/>
          <span>{{ $t('mine.order') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'record'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine4Img"/>
          <span>{{ $t('mine.record') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'rixibao'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine5Img"/>
          <span>{{ $t('mine.rixibao') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'editPassword'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine10Img"/>
          <span>{{ $t('mine.editPassword') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'editPayPassword'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine9Img"/>
          <span>{{ $t('mine.editPayPassword') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link :to="{name:'policy'}">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine6Img"/>
          <span>{{ $t('mine.policy') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
    <div class="menu-item" @click="logout()">
      <router-link to="">
        <div class="menu-item-left">
          <van-image width="35px" height="35px" :src="mine7Img"/>
          <span>{{ $t('mine.logout') }}</span>
        </div>
        <van-icon name="arrow"/>
      </router-link>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../less/mine.less";
</style>